<template>
<!-- 规格卡片 -->
  <div 
    class="card"
    style="line-height: 1.2; min-width: 860px; max-width: 60%;">
    <div class="card-header d-flex align-items-center">
      规格项：
      <el-input 
        size="mini" 
        style="width: 200px;" 
        class="ml-2 mr-3" 
        :value="item.name" 
        @input="vModel('name', index, $event)">
          <el-button slot="append" icon="el-icon-more"></el-button>
      </el-input>
      <el-radio-group 
        size="mini" 
        :value="item.type"
        @input="vModel('type', index, $event)">
          <el-radio class="mb-0 mr-3" :label="0">无</el-radio>
          <el-radio class="mb-0 mr-3" :label="1">颜色</el-radio>
          <el-radio class="mb-0 mr-3" :label="2">图片</el-radio>
      </el-radio-group>
      <!-- 上移 -->
      <el-button 
        class="ml-auto" 
        icon="el-icon-top" 
        size="mini" 
        :disabled="index === 0"
        @click="sortCard('moveUp', index)"></el-button>
      <!-- 下移 -->
      <el-button 
        icon="el-icon-bottom" 
        size="mini" 
        :disabled="index === sku_card.length-1"
        @click="sortCard('moveDown', index)"></el-button>
      <el-button type="text" @click="delSkuCard(index)">删除</el-button>
    </div>
    <div class="card-body">
      <!-- 规格属性列表 增加规格 -->
      <div class="d-flex align-items-center flex-wrap mb-2">
        <sku-card-children 
          :type="item.type" 
          v-for="(v, i) in item.list" 
          :key="i" 
          :item="v" 
          :index="i"
          :card-index="index"></sku-card-children>
      </div>
      <div>
        <el-button 
          type="text" 
          size="mini" 
          icon="el-icon-plus" 
          @click="addSkuValue(index)">增加规格值</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import skuCardChildren from '@/components/shop/create/sku/sku-card-children.vue'
export default {
  components: {
    skuCardChildren
  },
  props: {
    item: {
      type: Object,
      default: ()=>({})
    },
    index: Number
  },
  data() {
    return {

    }
  },
  computed: {
    ...mapState('goods_create', ['sku_card'])
  },
  methods: {
    ...mapMutations('goods_create', ['vModelSkuCard', 'delSkuCard', 'sortSkuCard', 'addSkuValue']),
    // v-model 对于 vuex中改数据的拆分方法
    vModel(key, index, val){
      this.vModelSkuCard({key, index, val})
    },
    sortCard(action, index){
      this.sortSkuCard({action, index})
    }
  }
}
</script>

<style scoped>
  .card + .card{
    margin-top: 20px;
  }
</style>